<template>
    <div class="icons">
        <div class="icon" v-for="item in iconList" :key="item.id">
            <div class="icon-img">
                <img :src="item.imgUrl" alt="#">
                <p>{{ item.desc }}</p>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "HomeIcons",
    props:['iconList'],
}
</script>
  
<style lang="scss" scoped>
    .icons{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        margin: 20px 0;

        .icon{
            width: 25%;
            .icon-img{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 70%;
                    height: 70%;
                    margin: 10px 0;
                }
                p{
                    color: #666;
                }
            }
        }
    }
</style>